<template>
  <div class="vt-checkbox flx-lm" >
    <div class="flx-mm" :class="cartItemChecker ? 'vt-check-icon': 'vt-uncheck-icon'" @click="onCheck">
      <i class="fa fa-check" aria-hidden="true" />
    </div>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'checkgroup-item',
    props: {
      val: {
        type: [String, Number],
        require: true
      }
    },
    data() {
      return {
        cartItemChecker : false
      }
    },
    inject: ['test'],
    watch: {
      test: {
        immediate: true,
        handler() {
          let isExistInVModel = this.test.some(i=>{
            return i === this.val
          })
          this.checkCartItem(isExistInVModel)
          this.$parent.$emit('check-item-update')
        }
      }
    },
    methods: {
      checkCartItem(x){
        this.cartItemChecker = x
      },
      onCheck(){
        this.$parent.$emit('click-checkbox-group-item', this.val)
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import './index.styl'
</style>
